<template>
    <div class="page-container">
        <h-chart :options="lineChartOptions" height="400px" />

    </div>
</template>

<script setup name="validate">
import { dayjs } from "element-plus";
const { proxy } = getCurrentInstance()
/** Data */
const lineChartOptions = ref({});


/** 生命周期钩子 */
onMounted(()=>{
    let data = {
        dates: ["2025-07-20", "2025-07-21", "2025-07-22", "2025-07-23", "2025-07-24", "2025-07-25", "2025-07-26"],
        pvList: [1963, 4682, 5120, 4622, 4980, 3566, 598],
        ipList: [156, 442, 426, 380, 394, 373, 58]
    }
    updateLineChartOptions(data)
})

/** Method */
const updateLineChartOptions = (data) => {
    console.log("Updating visit trend chart options");
    lineChartOptions.value = {
        tooltip: {
            trigger: "axis",
        },
        legend: {
            data: ["浏览量(PV)", "访客数(UV)"],
            bottom: 0,
        },
        grid: {
            left: "1%",
            right: "5%",
            bottom: "10%",
            containLabel: true,
        },
        xAxis: {
            type: "category",
            data: data.dates,
        },
        yAxis: {
            type: "value",
            splitLine: {
                show: true,
                lineStyle: {
                    type: "dashed",
                },
            },
        },
        series: [
            {
                name: "浏览量(PV)",
                type: "bar",
                data: data.pvList,
                areaStyle: {
                    color: "rgba(64, 158, 255, 0.1)",
                },
                smooth: true,
                itemStyle: {
                    color: "#4080FF",
                },
                lineStyle: {
                    color: "#4080FF",
                },
            },
            {
                name: "访客数(UV)",
                type: "bar",
                data: data.ipList,
                areaStyle: {
                    color: "rgba(103, 194, 58, 0.1)",
                },
                smooth: true,
                itemStyle: {
                    color: "#67C23A",
                },
                lineStyle: {
                    color: "#67C23A",
                },
            },
        ],
    };
};
</script>

<style lang="less" scoped>
@import "index.less";
</style>
